<template>
  <div class="person">
    <h1>监视情况二：【ref】定义的【对象类型】数据</h1>

    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改人</button>

  </div>
</template>

<script setup lang="ts">

import { ref, watch } from 'vue';
//数据
let person = ref({
  name: "zhang3",
  age: 18
});
//方法    
function changeAge() {
  person.value.age += 1;
}
function changeName() {
  person.value.name += "~"
}
function changePerson() {
  person.value = { name: "lisi", age: 10 }
}

//监视器watch：监视情况二：【ref】定义的【对象类型】数据
watch(person, (newValue, oldValue) => {
  console.log("数据发生变化：", newValue, oldValue)
}, { deep: true })

</script>

<style scoped>
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>